<!DOCTYPE html>
<html class="insetting">
 <head>
  <meta charset="UTF-8" />
  <title>Clippy — CSS clip-path 生成器</title>
  <link rel="stylesheet" type="text/css" href="style.min.css" />
  <link rel="shortcut icon" href="pics/favicon.png" />
  <link rel="apple-touch-icon" sizes="120x120" href="pics/apple-touch-icon-120x120.png" />
  <link rel="apple-touch-icon" sizes="152x152" href="pics/apple-touch-icon-152x152.png" />
  <link rel="icon" sizes="196x196" href="homescreen-196x196.png" />
  <meta name="viewport" content="width=device-width" />
 </head>
 <body>
  <div class="main">
   <header class="fade-content">
    CSS clip-path 生成器 
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="bennettfeely">Tweet</a>
    <script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script>
   </header>
   <div class="demo-container fade-content">
    <section class="demo">
     <div id="box" class="box">
      <div class="shadowboard"></div>
      <div class="clipboard"></div>
      <div class="handles"></div>
     </div>
     <div class="custom-notice">
      <div>
       <span class="touchy"></span> to add points
       <br />to custom polygon.
      </div>
     </div>
    </section>
   </div>
   <section class="dark-panel custom">
    <h2>Custom shape</h2>
    <button class="finish"></button>
   </section>
   <section class="dark-panel inset">
    <div class="flex">
     <h2>Round edges</h2>
     <input value="5% 20% 0 10%" class="inset-round" type="text" />
    </div>
    <p>The <code>inset()</code> shape optionally allows values similar to <code>border-radius</code> for rounded edges. This new feature may be buggy in <span class="your-browser">your browser</span>.</p>
   </section>
   <section id="flickity" class="shapes horizontal gallery">
    <ul></ul>
   </section>
   <section class="clip-path" tabindex="-1">
    <div class="css-code code fade-content">
     <code class="webkit block show">-webkit-clip-path: <span class="functions"></span>;</code> 
     <code class="unprefixed block show">clip-path: <span class="functions"></span>;</code>
    </div>
    <button class="edit-in-codepen code"></button>
   </section>
  </div>
  <div class="side">
   <section class="dark-panel inset">
    <div class="flex">
     <h2>Round edges</h2>
     <input value="5% 20% 0 10%" class="inset-round" type="text" />
    </div>
    <p>The <code>inset()</code> shape optionally allows values similar to <code>border-radius</code> for rounded edges. This new feature may be buggy in <span class="your-browser">your browser</span>.</p>
   </section>
   <section class="dark-panel custom">
    <h2>Custom shape</h2>
    <button class="finish"></button>
   </section>
   <section class="shapes vertical" tabindex="-1">
    <ul></ul>
   </section>
   <section class="options">
    <div class="grid panel flex fade-content">
     <h2>前缀</h2>
     <input name="prefix" value="5" type="checkbox" id="webkit" checked="checked" />
     <label for="webkit">webkit</label>
    </div>
    <div class="grid panel flex fade-content">
     <h2>Demo 尺寸</h2>
     <input id="demo_width" value="280" type="number" />
     <h2>&times;</h2>
     <input id="demo_height" value="280" type="number" />
    </div>
    <div class="grid panel fade-content">
     <h2>Demo 背景</h2>
     <div class="backgrounds">
      <img src="pics/pittsburgh.jpg" /> 
      <img src="pics/fierenze.jpg" /> 
      <img src="pics/sparkler.jpg" /> 
      <img src="pics/miami.jpg" />
     </div>
     <input placeholder="自定义 URL..." id="custom_url" type="url" name="background" />
     <style id="custom_background"></style>
     <div class="flex shadowboard-toggle">
      <h2>显示 clip-path外部</h2>
      <input name="prefix" type="checkbox" id="shadowboard-toggle" />
      <label class="joined" for="shadowboard-toggle"></label>
     </div>
    </div>
    <div class="grid panel fade-content">
     <h2>About Clip Paths</h2>
     <p><code>clip-path</code> 属性允许你将元素裁剪为基本形状（圆形，椭圆形，多边形或嵌入）或 SVG ，从而在 CSS 中制作复杂形状。</p>
     <p>两个或更多个具有相同点数的剪辑路径形状可以使用CSS的动画（Animations）和过渡（transitions）。</p>
    </div>
    <a href="http://caniuse.com/#search=clip-path" class="grid panel browser-support permanent fade-content"><h2 class="block">Browser Support <small>caniuse.com</small></h2>
     <div class="table">
      <span class="icon chrome" data-version="24+"></span> 
      <span class="icon safari" data-version="8+"></span> 
      <span class="icon opera" data-version="15+"></span> 
      <span class="icon ie unsupported" data-version=""></span> 
      <span class="icon firefox" data-version="54+"></span>
     </div></a>
    
   </section>
  </div>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script src="draggabilly.min.js"></script>
  <script src="dev/flickity.pkgd.min.js"></script>
  <script src="dev/clip.js"></script>
  <script src="clip.min.js"></script>
  <script src="https://s9.cnzz.com/z_stat.php?id=5409218&web_id=5409218" language="JavaScript"></script>
 </body>
</html>